<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        
        <div class="serch">
          <label style="margin-right: 5px">订单号：</label>
          <el-input
          v-model="input"
          placeholder="请输入订单号"
          style="width: 30%;margin-right: 5px"
          clearable
          @clear="init"
          @keyup.enter.native="init()"
        />
        <el-button class="normal-btn continue" style="margin-right: 15px;height:40px" @click="init()"
          >查询</el-button
        >

        <label style="margin-right: 5px;">订单状态：</label>
        <el-select v-model="status" slot="status" placeholder="请选择" style="width: 120px;">
          <el-option label="已完成" :value="5"></el-option>
          <el-option label="已退款" :value="7"></el-option>
          <el-option label="无" value=""></el-option>
        </el-select>

        <div class="block">
          <span class="demonstration">下单时间：</span>
          <el-date-picker
            style=""
            v-model="value2"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            :change="changeDate()">
          </el-date-picker>
        </div>

        </div>

      </div>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableData"
        stripe
        v-if="tableData.length"
        class="tableBox"
        style="line-height: 40px;"
      >
        <el-table-column prop="number" label="订单号"  width="200px" style="height: 40px;" show-overflow-tooltip/>
        <el-table-column prop="amount" label="订单金额">
          <template slot-scope="scope" >
            {{ scope.row.amount }}￥
          </template>
        </el-table-column>
        <el-table-column prop="isVip" label="会员"  >
          <template slot-scope="scope" >
            {{ scope.row.isVip === 0 ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"  width="260px" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>
              {{ scope.row.reamrk == null ? '无' : scope.row.reamrk }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope" >
            <div
              class="tableColumn-status"
              :class="{ 'stop-use': String(scope.row.status) === '0' }"
            >
              {{ String(scope.row.status) === '5' ? '已完成' : '已退款' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间"  />
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              style="color: red;"
              @click="refund(scope.row.id)"
            >
              退款
            </el-button>
            <el-button
              type="text"
              size="small"
              class="non"
              @click="orderDetail(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Empty v-else :is-search="isSearch" />
      <el-pagination
        class="pageList"
        :page-sizes="[12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {ordersEmployeePage,refund} from '@/api/orderEmployee'
import Empty from '@/components/Empty/index.vue'

export default {
  components:{
    Empty
  },
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:'',
      loading: false,
      tableData:[],
      page:1,
      pageSize:12,
      input:'',
      isSearch:false,
      id:'',
      status:'',
      counts:0,
      initFun:'',
      beginTime:'',
      endTime:'',
      storeId:this.$store.state.user.userInfo.storeId,
      userId:'',
      rejectionReason:'',
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      this.storeId = this.storeId == 0? '' : this.storeId
      const res = ordersEmployeePage(this.beginTime,this.endTime,this.input,this.page,this.pageSize,this.status,this.storeId,'');
      res.then((res)=>{
        console.log('res')
        this.tableData = res.data.records
        console.log(this.tableData)
        this.counts = res.data.total
      }).catch((err)=>{
        console.log(err)
      })
    },
   handleSizeChange(val) {
    this.pageSize = val
    this.init()
  },

   handleCurrentChange(val) {
    this.page = val
    this.init()
  },
  changeDate(){
    console.log(this.value2)
    if(this.value2 == null){
      this.beginTime = ''
      this.endTime = ''
    }
    else{
      this.beginTime = this.value2[0]
      this.endTime = this.value2[1]
    }

  },
  orderDetail(row){
    console.log(row)
    //this.$route.query.id
    this.$router.push({
      path:'/home/orderDetail',
          query:{
            id:row.id,
            method:0
          }
    })
  },
  refund(id){
    this.$prompt('请输入退款理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.rejectionReason = value
          let reson = {
            id: id,
            rejectionReason : value
          }
          refund(reson).then((res)=>{
            console.log(res)
              this.$message({
              type: 'success',
              message: '退款成功'
            });
            this.init()
          }).catch((err)=>{
              this.$message({
              type: 'info',
              message: err
            });   
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消退款'
          });       
        });
  }
  }
}
</script>

<style  scoped>
.disabled-text {
  color: #bac0cd !important;
}
.tableBar{
  line-height: 40px;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

.tableBox{
  height: 775px;
  border-radius: 5px;
  
}
.add{
  height: 40px;
  margin-right: 15px;
}

.pageList{
  line-height: 40px;
  margin-top: 15px;
}

.container{
  /* height: 88vh; */
  
}

.serch{
  display: flex;
  height:  70px;
  justify-content: space-between;
  width: 100%;
}

.block{
  display: flex;

}
</style>